<template>
  <!-- 电梯统计 -->
  <div class="chart-box2">
    <div class="chart-title">电梯统计</div>
    <div class="chart-content">
      <div class="total-info">
        <a-row :gutter="8" align="middle" class="h-100p">
          <a-col :span="6">
            <div class="text-number-1">
              <div>客梯总数</div>
              <div class="number total">
                <count-to
                  :start-val="numTotal.elevator.total.oldVal"
                  :end-val="numTotal.elevator.total.newVal"
                  :duration="3000"
                />
              </div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="text-number-1">
              <div>客梯故障数</div>
              <div class="number broken">
                <count-to
                  :start-val="numTotal.elevator.broken.oldVal"
                  :end-val="numTotal.elevator.broken.newVal"
                  :duration="3000"
                />
              </div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="text-number-1">
              <div>货梯总数</div>
              <div class="number total">
                <count-to
                  :start-val="numTotal.lift.total.oldVal"
                  :end-val="numTotal.lift.total.newVal"
                  :duration="3000"
                />
              </div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="text-number-1">
              <div>货梯故障数</div>
              <div class="number broken">
                <count-to
                  :start-val="numTotal.lift.broken.oldVal"
                  :end-val="numTotal.lift.broken.newVal"
                  :duration="3000"
                />
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="chart-container" :id="chartId"></div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  onBeforeUnmount,
  nextTick,
  watch,
} from "vue";
import { Chart, registerTheme } from "@antv/g2";
import common from "../../utils/common";
import DataSet from "@antv/data-set";
import CountTo from "../countTo/index.vue";
import store from "../../../../store";

export default defineComponent({
  name: "LiftTotal",
  components: { CountTo },
  setup(props, context) {
    const state = reactive({
      chartId: "liftTotalChart",
      chart: null,
      data: [],
      numTotal: {
        elevator: {
          total: { ...common.countToInit },
          broken: { ...common.countToInit },
        },
        lift: {
          total: { ...common.countToInit },
          broken: { ...common.countToInit },
        },
      },
    });

    const initChart = () => {
      const data = state.data;

      const dv = new DataSet.DataView();
      dv.source(data).transform({
        type: "fold",
        fields: ["broken", "total"],
        key: "valueKey",
        value: "value",
      });

      const colorMap = {
        broken: common.theme.primaryRed,
        total: common.theme.primaryColor,
      };

      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
        theme: "chartTheme",
        padding: [0, 40],
      });

      state.chart.coordinate("rect").transpose();

      state.chart.data(dv.rows);
      state.chart.scale("value", {
        nice: true,
        alias: "电梯数量",
      });
      state.chart.scale("valueKey", {
        nice: true,
        formatter(val) {
          return val == "broken" ? "故障数" : "总数";
        },
      });

      state.chart.axis("type", {
        title: null,
        labelOffset: 10,
      });

      state.chart.tooltip({
        shared: true,
        showMarkers: false,
      });

      state.chart.legend({
        position: "right-bottom",
      });

      state.chart
        .interval()
        .adjust("stack")
        .position("type*value")
        .color("valueKey", (valueKey) => {
          return colorMap[valueKey];
        });

      state.chart.render();
    };

    watch(
      () => store.getters.centerControl.Device_elevatorStatistic,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { Device_elevatorStatistic } = store.getters.centerControl;
      if (Device_elevatorStatistic) {
        state.data = [
          {
            type: "客梯",
            total: Number(Device_elevatorStatistic.elevator.total_num),
            broken: Number(Device_elevatorStatistic.elevator.fault_num),
          },
          {
            type: "货梯",
            total: Number(Device_elevatorStatistic.cargo_lift.total_num),
            broken: Number(Device_elevatorStatistic.cargo_lift.fault_num),
          },
        ];
        state.numTotal = {
          elevator: {
            total: {
              oldVal: state.numTotal.elevator.total.newVal,
              newVal: Number(Device_elevatorStatistic.elevator.total_num),
            },
            broken: {
              oldVal: state.numTotal.elevator.broken.newVal,
              newVal: Number(Device_elevatorStatistic.elevator.fault_num),
            },
          },
          lift: {
            total: {
              oldVal: state.numTotal.lift.total.newVal,
              newVal: Number(Device_elevatorStatistic.cargo_lift.total_num),
            },
            broken: {
              oldVal: state.numTotal.lift.broken.newVal,
              newVal: Number(Device_elevatorStatistic.cargo_lift.fault_num),
            },
          },
        };
        if (state.chart) {
          state.chart.changeData(state.data);
        } else {
          nextTick(() => {
            initChart();
          });
        }
        context.emit('onShow', Device_elevatorStatistic.show)
      }
    };

    onMounted(() => {
      registerTheme("chartTheme", common.chartTheme);
      getData();
    });
    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
.chart-content {
  display: flex;
  flex-direction: column;
  .total-info {
    height: 30%;
    .number {
      font-size: 2.4rem;
      margin-top: -0.4rem;
    }
    .total {
      color: @primaryColor;
    }
    .broken {
      color: @primaryRed;
    }
  }
  .chart-container {
    flex: 1;
    margin-top: 1rem;
  }
}
</style>
